<template>
  <div class="home-page">
    <van-sticky>
      <van-search v-model="search.keyword"
                  shape="round"
                  background="#d41e32"
                  show-action
                  placeholder="请输入搜索关键词"
                  class="home-search"
                  @search="onSearch">
        <template #left>
          <div class="logo m-white"></div>
        </template>
        <template #action>
          <div @click="onSearch"
               class="m-white">搜索</div>
        </template>
      </van-search>
    </van-sticky>
    <!-- <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    > -->
    <van-notice-bar left-icon="volume-o"
                    :scrollable="false">
      <van-swipe vertical
                 class="notice-swipe"
                 :autoplay="3000"
                 :show-indicators="false">
        <van-swipe-item v-for="notice in topData.noticeList">{{notice}}</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <van-swipe class="home-swipe"
               :autoplay="3000"
               indicator-color="#fff">
      <van-swipe-item v-for="(image, index) in topData.bannerList"
                      :key="index">
        <img :src="urlFormat(image.advert_pic)"
             alt="">
      </van-swipe-item>
    </van-swipe>
    <van-grid square
              class="home-categories">
      <van-grid-item v-for="(item,idx) in topData.categoryList.slice(0,8)"
                     :key="idx"
                     icon="photo-o"
                     text="文字">
        <van-image :src="urlFormat(item.logo)"
                   width="40" />
        <p>{{nameFormat(item.type_name)}}</p>
      </van-grid-item>
    </van-grid>
    <van-tabs v-model:active="active">
      <van-tab title="热销品牌">
        <div class="hot-brands section">
          <div class="cate-item"
               v-for="item in topData.hotBrandsData">
            <van-divider :style="{ color: '#d41e32', borderColor: '#d41e32', padding: '0 16px' }">
              {{item.name}}
            </van-divider>
            <!-- <h3></h3> -->
            <div class="advert"
                 v-for="img in item.children">
              <img :src="urlFormat(img.advert_pic)"
                   alt="">
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="实力品牌">
        <div class="power-brands section">
          <div class="brand-item"
               v-for="item in topData.powerData">
            <h4>{{item.advert_title}}</h4>
            <div class="advert">
              <img :src="urlFormat(item.advert_pic)"
                   alt="">
            </div>
            <GoodsItemCpm v-for="product in item.product_list"
                          :value="product" />
          </div>
        </div>
      </van-tab>
      <van-tab title="最新品牌">
        <div class="hot-brands section">
          <div class="cate-item"
               v-for="item in topData.hotBrandsData">
            <van-divider :style="{ color: '#d41e32', borderColor: '#d41e32', padding: '0 16px' }">
              {{item.name}}
            </van-divider>
            <!-- <h3></h3> -->
            <div class="advert"
                 v-for="img in item.children">
              <img :src="urlFormat(img.advert_pic)"
                   alt="">
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <div class="section">
      <h3></h3>
    </div>
    <!-- </van-pull-refresh> -->
  </div>
</template>

<script>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
import {
  code,
  getHomeBannerList,
  getHomeCateList,
  getHomeHotBrandsData,
  getHomeMainStrength,
} from "/@api/index";

import GoodsItemCpm from "/@cpms/GoodsItem.vue";

export default {
  name: "Home",
  components: {
    GoodsItemCpm,
  },
  setup (props, self) {
    const active = ref(0);
    const topData = reactive({
      bannerList: [],
      noticeList: [],
      categoryList: [],
      hotBrandsData: [],
      powerData: [],
    });

    const { search, onSearch } = initHomeSearch();
    const { isLoading, onRefresh } = handleRefresh();
    const { urlFormat, nameFormat } = initTools();

    onMounted(() => {
      initHomeTopData(topData);
      initCategoriesData(topData);
      initPowerBrandData(topData);
      initMainStrengthData(topData);
    });
    return {
      active,
      search,
      onSearch,
      isLoading,
      onRefresh,
      topData,
      urlFormat,
      nameFormat,
    };
  },
};

// 初始化首页顶部搜索数据及方法
const initHomeSearch = () => {
  const { push } = useRouter();
  const search = reactive({
    keyword: "",
  });
  const onSearch = () => {
    console.log(search.keyword);
    push({ path: "/search", query: search });
  };
  return { search, onSearch };
};

// 初始化首页顶部数据
const initHomeTopData = async (topData) => {
  const { data } = await getHomeBannerList();
  topData.bannerList = data.data;
  topData.noticeList = [
    "全民消防商城大促，赶快抢购吧！",
    "双十一活动抢先购，优惠多多！",
  ];
};
// 初始化分类数据
const initCategoriesData = async (topData) => {
  const { data } = await getHomeCateList();
  topData.categoryList = data.data;
};
// 实力商家
const initPowerBrandData = async (topData) => {
  const { data } = await getHomeHotBrandsData();
  topData.hotBrandsData = data.data;
  console.log(topData.hotBrandsData);
};
// 实力商家
const initMainStrengthData = async (topData) => {
  const { data } = await getHomeMainStrength();
  topData.powerData = data.data;
};
// 刷新方法
const handleRefresh = () => {
  let isLoading = ref(false);
  const onRefresh = () => {
    setTimeout(() => {
      Toast("刷新成功");
      isLoading.value = false;
    }, 1000);
  };
  return { isLoading, onRefresh };
};
const initTools = () => {
  const urlFormat = (url) => {
    return "https://pms-uploads1.oss-cn-chengdu.aliyuncs.com" + url;
  };
  const nameFormat = (name) => {
    return name.replace("系列", "").slice(0, 4);
  };
  return { urlFormat, nameFormat };
};
</script>
<style lang="less" scoped>
.home-page {
  height: 100%;
  overflow: scroll;
  .home-search {
    .logo {
      height: 30px;
      width: 72px;
      margin-right: 10px;
      background-image: url(../assets/logo-1.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }
  .notice-swipe {
    height: 40px;
    line-height: 40px;
  }
  .van-pull-refresh {
    height: calc(100% - 54px);
  }
  .home-swipe {
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      height: 10rem;
      text-align: center;
      background-color: #d41e32;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .home-categories {
    ::v-deep(.van-grid-item__content) {
      padding: 0;
      background-color: #eee;
    }
  }
  .section {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    .van-divider {
      margin: 0 0 10px 0;
    }
  }
  .hot-brands {
    .cate-item {
      margin: 10px 0;
      .cate-item-title {
        width: 100%;
      }
      .advert {
        display: inline-block;
        width: 50%;
        padding: 0 5px;
        padding-bottom: 10px;
        min-height: 215px;
        box-sizing: border-box;
        img {
          width: 100%;
          border-radius: 10px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
      }
    }
  }
  .power-brands {
    margin: 10px 0;
    .brand-item {
      display: flex;
      width: 100%;
      font-size: 0;
      flex-wrap: wrap;
      justify-content: space-between;

      h4 {
        display: block;
        line-height: 26px;
        border-left: 6px solid #d41e32;
        padding-left: 5px;
        width: 100%;
        font-size: 1.2rem;
        margin: 15px 0 5px 0;
      }

      .advert {
        width: calc(50% - 5px);
        flex-shrink: 0;
        height: 215px;
        margin: 5px 0;
        overflow: hidden;
        border-radius: 10px;
        box-sizing: border-box;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>